<template>
  <div class="container">
    <el-card>
      <!-- 导航栏搜索区域 -->
      <el-row :gutter="19">
       <el-form :inline="true" :model="dataL" class="demo-form-inline">
          <el-col :span="16">
            <el-form-item label="目录名称">
              <el-input v-model="dataL.tagName"></el-input>
            </el-form-item>
            <!-- 状态区域 -->
            <el-form-item label="状态">
              <el-select v-model="dataL.state" placeholder="请选择">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁止" value="0"></el-option>
              </el-select>
            </el-form-item>
            <!-- 清空按钮 -->
            <el-button @click="butRemove">清空</el-button>
            <!-- 搜索按钮 -->
            <el-button type="primary" @click="onSubmits"
              >搜索</el-button
            >
            <!-- 返回按钮 -->
            <el-button
              type="text"
              v-if="$route.query.id ? true : false"
              @click="goBtn"
              >返回学科</el-button
            >
          </el-col>
        <!-- 新增目录按钮 -->
          <el-col :span="3" style="text-align: right">
            <el-button
              type="success"
              icon="el-icon-edit"
              @click="getCateList"
              >新增标签</el-button
            >
          </el-col>
        </el-form>
      </el-row>
      <!-- 点击添加目录 -->
      <el-dialog title="新增目录" :visible.sync="addCateDiaLogViS" width="30%">
        <el-form
          :model="addCateForm"
          :rules="addCateFormRures"
          ref="addCateFormRef"
          label-width="100px"
        >
          <el-form-item label="所属学科" prop="subjectID">
            <el-select v-model="addCateForm.subjectID" placeholder="请选择" style="width: 314px">
              <el-option
                v-for="items in lingling"
                :key="items.id"
                :label="items.subjectName"
                :value="items.id"
                width="350px"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称" prop="tagName">
            <el-input v-model="addCateForm.tagName" placeholder="请输入目录名称"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeBtn">取 消</el-button>
          <el-button type="primary" @click="addBtn">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 提示一共多少数据 -->
      <el-alert :title="`数据一共${total}条`" type="info" show-icon>
      </el-alert>
      <!-- 数据列表 -->
      <template>
        <el-table :data="list" style="width: 100%" class="hhhaaa" >
          <el-table-column type="index" label="序号" width="50px"> </el-table-column>
          <el-table-column prop="subjectName" label="所属学科">
          </el-table-column>
          <el-table-column prop="tagName" label="标签名称"> </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column prop="addDate" label="创建日期">
            <template slot-scope="scope">
              {{ scope.row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column prop="totals" label="面试题数量"> </el-table-column>
          <el-table-column prop="state" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.state === 1">已启用</span>
              <span v-else>已禁用</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="chang(scope.row)">{{
                scope.row.state === 1 ? "禁用" : "启用"
              }}</el-button>
              <el-button
                type="text"
                :disabled="scope.row.state === 1 ? false : true"
                @click="modificationBtn(scope.row)"
                >修改</el-button
              >
              <el-button
                type="text"
                :disabled="scope.row.state === 1 ? false : true"
                @click="removeBtn(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页功能 -->
      <div class="pagination" style="text-align: right">
          <PageTool
            :paginationPagesize="formInline.pagesize"
            :paginationPage="formInline.page"
            :total="total"
            @pageChange="handleCurrentChange"
            @pageSizeChange="handleSizeChange"
          ></PageTool>
        </div>
    </el-card>

    <!-- 点击修改按钮弹出框 -->
    <el-dialog
      title="修改目录"
      :visible.sync="addCateDiaLogViSible"
      width="30%"
    >
      <el-form
        :model="addCateForm"
        :rules="addCateFormRures"
        ref="addCateFormRef"
        label-width="100px"
      >
        <el-form-item label="所属学科">
          <el-select v-model="addCateForm.subjectID" placeholder="请选择" style="width: 314px">
            <el-option
              v-for="items in lingling"
              :key="items.id"
              :label="items.subjectName"
              :value="items.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="tagName">
          <el-input v-model="addCateForm.tagName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCateDiaLogViSible = false">取 消</el-button>
        <el-button type="primary" @click="putBtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list } from "@/api/hmmm/tags";
import { list as lise } from "@/api/hmmm/subjects";
import { add } from "@/api/hmmm/tags";
import { remove } from "@/api/hmmm/tags";
import { update } from "@/api/hmmm/tags";
import { changeState } from "@/api/hmmm/tags";
import PageTool from '@/module-manage/components/page-tool'

export default {
  data() {
    return {
      list: [],
      dataL: {
        state: "",
        tagName: "",
      },
      formInline: {
        page: 1,
        pagesize: 10,
        subjectID: null,
      },
      lingling: [],
      total: 0,
      disable: true,
      addCateDiaLogViS: false,
      // 控制新增目录的显示
      addCateDiaLogViSible: false,
      //  添加分类的表单数据对象
      addCateForm: {
        //  将要添加目录的名称
        tagName: "",
        //  将要添加目录的id
        subjectID: "",
      },
      //  添加目录验证规则
      addCateFormRures: {
        tagName: [
          { required: true, message: "请输入目录名称", trigger: "blur" },
        ],
      },
      curr: null,
    };
  },
  components: {
    PageTool
  },
  computed: {
    acc() {
      const rest = { ...this.formInline };
      for (const key in this.dataL) {
        if (this.dataL[key] === "") {
          continue;
        } else {
          rest[key] = this.dataL[key];
        }
      }
      return rest;
    },
  },
  created() {
    this.onSubmit(this.formInline);
    // console.log(formInline);
    if (this.$route.query.id) {
      this.formInline.subjectID = this.$route.query.id;
      this.onSubmit(this.formInline);
    }
  },
  methods: {
    async onSubmit() {
      const { data } = await list(this.acc);
      console.log(data)
      this.list = data.items;
      this.total = data.counts;
      // console.log(this.counts);
    },
    onSubmits() {
      (this.formInline.tagName = this.dataL.username),
        (this.formInline.state = Number(this.dataL.state));
      // console.log(this.formInline);
      this.onSubmit(this.dataL);
    },
    // 监听pagesize改变事件
    handleSizeChange(newSize) {
      // console.log(newSize);
      this.formInline.pagesize = newSize;
      this.onSubmit(this.formInline);
    },
    // 监听页码值改变的事件
    handleCurrentChange(newpage) {
      // console.log(newpage);
      this.formInline.page = newpage;
      this.onSubmit(this.formInline);
    },
    chang(row) {
      // console.log(row)
      // roe.state !== roe.state
      this.disable = !this.disable;
      if (row.state === 0) {
        row.state = 1;
        this.$message.success("启用成功");
      } else {
        row.state = 0;
        this.$message.success("禁用成功");
      }
      changeState({ id: row.id, state: row.state });
      this.onSubmits();
    },
    butRemove() {
      (this.dataL.tagName = null), (this.dataL.state = null);
    },
    // 点击按钮展开添加目录对话框

    async getCateList() {
      const { data } = await lise();
      this.addCateDiaLogViS = true;
      this.lingling = data.items;
      this.onSubmits();
    },
    async addBtn() {
      this.addCateDiaLogViS = false;
      // console.log(this.addCateForm);
      await add(this.addCateForm);
      this.onSubmits();
    },
    closeBtn () {
      this.addCateDiaLogViS = false
      this.$refs.addCateFormRef.resetFields()
    },
    // 修改按钮
    async modificationBtn(row) {
      const data = await lise();
      this.addCateDiaLogViSible = true;
      this.addCateForm.tagName = row.tagName;
      this.addCateForm.subjectID = row.subjectID;
      this.lingling = data.data.items;
      this.curr = row.id;
      this.onSubmits();
    },
    // 返回按钮
    goBtn() {
      this.$router.push("/subjects/list");
    },
    // 删除按钮
    removeBtn(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await remove({ id });
          this.onSubmit();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async putBtn() {
      const data = await update({
        id: this.curr,
        subjectID: this.addCateForm.subjectID,
        tagName: this.addCateForm.tagName,
      });
      if (data.status !== 200) {
        return this.$message.error("修改失败");
      }
      this.$message.success("修改成功");
      this.onSubmits();
      this.addCateDiaLogViSible = false;
    }
  }
}
</script>

<style scoped >
.pagination {
  padding: 20px;
}
.hhhaaa {
  margin-top: 15px;
}
.el-card {
  margin: 5px 10px;
}
.demo-form-inline{
  display: flex;
  justify-content: space-between;
}
</style>
